<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>员工列表</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body a {
        text-decoration: none;
        color: #0d3a4b;
      }

      .active {
        color: #ffffff;
      }

      .wrap {
        width: 700px;
        height: 500px;
        background-color: skyblue;
        margin: 0 auto;
        position: relative;
      }

      .wrap #table {
        width: 460px;
        border-radius: 12px;
        position: absolute;
        left: 50%;
        top: 160px;
        transform: translateX(-50%);
        box-sizing: border-box;
        overflow: hidden;
      }

      .wrap #table thead {
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        color: #fff;
        background: #4cbfe5;
      }

      .wrap #table thead a {
        color: #fff;
      }

      .wrap #table tbody {
        color: #19c2ff;
      }

      .wrap #table tbody a {
        color: #19c2ff;
      }

      .wrap #table tbody tr {
        background: #fff;
      }

      .ctrl {
        position: absolute;
        left: 200px;
        top: 100px;
      }

      .ctrl div {
        width: 300px;
        line-height: 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
      }

      h1 {
        text-align: center;
        padding-top: 20px;
        color: white;
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
  </head>

  <body>
    <div class="wrap">
      <h1>员工列表</h1>
      <div class="ctrl">
        <div class="age_sort nu">
          <a href="javascript:;">年龄从小到大</a>
          <a href="javascript:;">年龄从大到小</a>
          <a href="javascript:;" class="active">默认排序</a>
        </div>
        <div class="gender_show">
          <a href="javascript:;">只显示男性</a>
          <a href="javascript:;">只显示女性</a>
          <a href="javascript:;" class="active">默认</a>
        </div>
      </div>
      <table id="table">
        <thead>
          <tr>
            <th>id</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>0</th>
            <th>小明</th>
            <th>24</th>
            <th>男</th>
          </tr>
        </tbody>
      </table>
    </div>
    <script>
      // 一、通过ajax请求数据，且渲染到页面上；
      //1. 发送ajax 显示数据库里的用户信息
      // 加载页面的时候就发送ajax请求；
      $.get("/getusers", null, function (res) {
        console.log(res);
        rendomDom(res);
      });

      // 2.把数据渲染到页面上
      function rendomDom(data) {
        let tbodyEle = document.querySelector("tbody"); //
        // tbody 里的内容清空掉
        tbodyEle.innerHTML = "";
        // 根据data 组装视图
        data.forEach((item, k) => {
          let trEle = document.createElement("tr");
          trEle.innerHTML = `<th>${k}</th>
                    <th>${item.name}</th>
                    <th>${item.age}</th>
                    <th>${item.gender}</th>`;
          tbodyEle.appendChild(trEle); // 添加内容
        });
      }

      // 二、获取 年龄排序的数据，通过携带参数来区分获取不同类型的数据。
      // 请求地址 ： /getusers ----> 1. /getusers?age=0 (年龄由小到大) 2./getusers?age=1(年龄由大到小)     3.getusers?age=2(默认排序)

      // 2个全局变量   功能的联动
      let ageIndex = 2; // 记录当前 年龄点击的按钮索引值 ，默认是2

      let genderIndex = 2; // 记录当前 性别按钮的索引值 ，默认是2

      // 获取年龄的按钮 绑定事件
      let ageBtns = document.querySelectorAll(".age_sort a");

      ageBtns.forEach((btn, k) => {
        btn.onclick = function () {
          ageIndex = k; // 点击年龄按钮的时候 给全局变量赋值
          // 点击的时候显示按钮的高亮效果
          ageBtns.forEach((item, key) => {
            if (key == k) {
              // 需要高亮的按钮
              item.classList.add("active");
            } else {
              item.classList.remove("active");
            }
          });
          // 发送ajax请求
          // 年龄排序的时候 同时做 性别的筛选
          $.get("/getusers", { age: k, gender: genderIndex }, function (res) {
            console.log(res);
            rendomDom(res); // 根据最新的排序数据 渲染dom结构。
          });

          // console.log(k);
        };
      });

      // 三 、性别筛选 ：把性别按钮的索引 传递给nodejs 处理，nodejs根据不同的索引返还不同的数据
      // 1.获取所有性别的按钮
      let genderBtns = document.querySelectorAll(".gender_show a");

      genderBtns.forEach((gender, k) => {
        gender.onclick = function () {
          genderIndex = k;
          // 性别按钮的高亮
          genderBtns.forEach((item, key) => {
            if (key == k) {
              item.classList.add("active");
            } else {
              item.classList.remove("active");
            }
          });
          console.log(k);
          // 在筛选性别的时候 同时也做年龄的排序
          // 发送ajax请求
          $.get("/getusers", { gender: k, age: ageIndex }, function (res) {
            console.log(res);
            rendomDom(res); // 根据最新的排序数据 渲染dom结构。
          });
        };
      });

      // 三、按钮的联动 ， 做年龄排序的时候 同时做一遍性别的筛选 ，做性别筛选的时候也需要做一下 年龄的排序
    </script>
  </body>
</html>
